<template>
    <el-tabs
            v-model="editableTabsValue"
            type="card"
            closable
            @tab-remove="removeTab"
            @tab-click="clickTab">
        <el-tab-pane
                v-for="(item, index) in editableTabs"
                :key="item.name"
                :label="item.title"
                :name="item.name"
        >
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    export default {
        name: 'HeadeTabs',
        data() {
            return {
                // targetName: ''
                // editableTabsValue: this.$store.state.tabs.editableTabsValue;
                // editableTabs: this.$store.state.tabs.editableTabs,
            }
        },
        computed: {
            editableTabsValue: {
                get(){
                    return this.$store.state.tabs.editableTabsValue;
                },
                set(val){
                    this.$store.state.tabs.editableTabsValue = val;
                }
            },
            editableTabs: {
                get(){
                    return this.$store.state.tabs.editableTabs;
                },
                set(val){
                    this.$store.state.tabs.editableTabs = val;
                }
            }
        },
        methods: {
            // 移除标签
            removeTab(targetName) {
                if (targetName==='Index') {
                    this.$message.info('首页无法关闭哦~');
                    return;
                };

                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }

                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
                if (this.$route.name!==activeName) this.$router.push({name: activeName});
            },
            // 点击标签
            clickTab(target) {
                if (this.$route.name!==target.name) this.$router.push({name: target.name});
            }
        }
    }
</script>

<style scoped lang="scss">
    .el-tabs{
        background-color: $defaultBackgroundColor;
    }
    ::v-deep .el-tabs__item:hover{
        color: $mainColor;
        cursor: pointer;
    }
    ::v-deep .el-tabs__item.is-active{
        color: $mainColor;
    }
</style>
